<template>
    <div>
      <button @click="sendMessage">Send Message to Parent</button>
      <p @click="incrementCounter">Counter: {{ counter }}</p>
    </div>
  </template>
  
  <script>
  import { defineComponent, ref, onMounted, watch ,getCurrentInstance } from 'vue';
  
  export default defineComponent({
    setup() {
      const counter = ref(0);
      const instance = getCurrentInstance();
      const sendMessage = () => {
        // 触发名为 'messageToParent' 的事件，并传递数据
        instance.emit('messageToParent', 'Hello from Child');
      };
  
      const incrementCounter = () => {
        counter.value++;
      };
  
      // 监听 counter 变化
      watch(counter, (newValue, oldValue) => {
        console.log(`Counter changed from ${oldValue} to ${newValue}`);
      });
  
      // 在组件挂载时执行的逻辑
      onMounted(() => {
        console.log('Component mounted');
      });
  
      return { sendMessage, counter, incrementCounter };
    }
  });
  </script>
